<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Formulario de inscripción de UC Propone</title>
	

    <!-- Bootstrap -->
    <link href="static/css/bootstrap.min.css" rel="stylesheet">
	<style>
	.center{margin: 0 auto 0 auto;}
	body{background-color:#FAEDBE;}
	</style>

  </head>
  <body>
<div class="container" id="principal">
    <h1>Inscripci&oacute;n de temas UC Propone</h1>
	A continuación se muestra el formulario para presentación de problemas que cada territorio presentará como propuestas de trabajo, en el marco de la iniciativa "UC Propone".
	Por favor completa brevemente los antecedentes solicitados:
    <br />
    <br />
	<form>
        <div class="form-group">
			<label for="titulo">T&iacute;tulo del tema propuesto</label>
			<input type="text" class="form-control" id="titulo">
		</div>
        <div class="form-group">
            <label>Selecciona un &aacute;rea para el tema propuesto</label>
		<div class="radio">
		  <label>
		    <input type="radio" name="opciones" id="opciones_1" value="educacion" checked>
		    Educaci&oacute;n
		  </label>
		</div>
		<div class="radio">
		  <label>
		    <input type="radio" name="opciones" id="opciones_2" value="economia y desempleo">
		    Econom&iacute;a y desempleo
		  </label>
		</div>
		<div class="radio">
		  <label>
		    <input type="radio" name="opciones" id="opciones_3" value="energia y medio ambiente">
		    Energ&iacute;a y medio ambiente
		  </label>
		</div>
		<div class="radio">
		  <label>
		    <input type="radio" name="opciones" id="opciones_4" value="justicia y seguridad publica">
		    Justicia y seguridad p&uacute;blica
		  </label>
		</div>
		<div class="radio">
		  <label>
		    <input type="radio" name="opciones" id="opciones_5" value="pobreza y desigualdad">
		    Pobreza y desigualdad
		  </label>
		</div>
		<div class="radio">
		  <label>
		    <input type="radio" name="opciones" id="opciones_6" value="sp y modernizacion">
		    Sistema pol&iacute;tico y modernizaci&oacute;n del estado
		  </label>
		</div>
		<div class="radio">
		  <label>
		    <input type="radio" name="opciones" id="opciones_7" value="salud">
		    Salud
		  </label>
		</div>
		<div class="radio">
		  <label>
		    <input type="radio" name="opciones" id="opciones_8" value="vivienda y urbanismo">
		    Vivienda y urbanismo
		  </label>
		</div>
		<div class="radio">
		  <label>
		    <input type="radio" name="opciones" id="opciones_9" value="derechos civiles">
		    Derechos civiles
		  </label>
		</div>
		<div class="radio">
		  <label>
		    <input type="radio" name="opciones" id="opciones_10" value="otro">
		    Otro
		  </label>
		</div>
        </div>
		<br />
		<div class="form-group">
			<label for="descripcion">Descripci&oacute;n</label>
			<textarea class="form-control" rows="3" id="descripcion"></textarea>
			<span class="help-block">Describe brevemente el problema o tema de investigaci&oacute;n para UC Propone identificando principales causas, efectos, y actores involucrados</span>
		</div>
		<br />
		<div class="form-group">
			<label for="autor">¿Qui&eacute;n levanta la propuesta?</label>
			<input type="text" class="form-control" id="autor">
			<span class="help-block">Centro de estudiantes, organizaci&oacute;n estudiantil, estudiante(s), etc.</span>
		</div>
		<br />
		<div class="form-group">
			<label for="uai">Unidades acad&eacute;micas involucradas</label>
			<input type="text" class="form-control" id="uai">
			<span class="help-block">A que UA pertenecen las personas que est&aacute;n escribiendo esta propuesta</span>
		</div>
		<br />
		<div class="form-group">
			<label for="academico">Sugiera a un acad&eacute;mico que podr&iacute;a guiar una investigaci&oacute;n en el tema propuesto.</label>
			<input type="text" class="form-control" id="academico">
			<span class="help-block">Esta pregunta no es obligatoria, en caso de completarla considera que el acad&eacute;mico que sugieres no necesariamente debe ser de tu unidad acad&eacute;mica. Poner nombre y UA de tu profesor.</span>
		</div>
		<div class="form-group">
	    <button type="button" class="btn-warning" id="submit">Subir</button>
            			<span class="help-block" id="cargando">Cargando</span>

	</div>
	</form>
</div>
 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="static/js/bootstrap.min.js"></script>
	<script>
	function validate()
	{
		requeridos = [['titulo','titulo'],['descripcion','descripcion'],['autor','autor'],['uai','unidad academica']];
		error = false;
		$.each(requeridos,function(index,value){
			if ($("#"+value[0]).val().length == 0)
			{
				alert("Falta el campo "+value[1]);
				error = true;
				return false;
			}
		});
		if (error == true) return false;
		return true;
	}
	$(document).ready(function(){
	    $("#cargando").hide();
		$("#submit").click(function(){
			if(validate() == true)
			{
			    $("#cargando").show();
			    var originalText = $("#cargando").text(),
                i  = 0;
                setInterval(function() {

                $("#cargando").append(".");
                i++;

                if(i == 4)
                {
                    $("#cargando").html(originalText);
                    i = 0;
                }

                 }, 500);
			    $("#submit").hide();
				var j={titulo:$("#titulo").val(),area:$("input[name=opciones]:checked").val() ,descripcion:$("#descripcion").val(), autor:$("#autor").val(),uai:$("#uai").val(), academico:$("#academico").val()};
				jQuery.ajax ({
				    url: 'http://vota.ucpropone.cl/api/tema/',
				    type: "POST",
				    data: JSON.stringify(j),
				    dataType: "text json",
				    contentType: "application/json; charset=utf-8",
				    success: function(data){
						$("#principal").html("<h1>Muchas gracias por tu participaci&oacute;n! </h1>")
				    },
				    error: function(x,y,z){
                        $("#principal").html("<h1>Hubo un error. Por favor, int&eacute;ntalo de nuevo. </h1>")
				    }
				});
			}
		});
	  });
	</script>
  </body>
</html>